<template>
    <div class="paper" v-if="paper">
        <div class="box">
            <h2>{{ paper.paper.title }}</h2>
            <el-table
                :data="paper.list"
                stripe
                style="width: 100%;height: 50vh;">
                <el-table-column
                prop="topic.title"
                label="标题">
                </el-table-column>
                <el-table-column
                style="min-width: 400px;"
                label="难度">
                    <template slot-scope="scope">
                        <el-rate
                            v-model="scope.row.topic.level"
                            disabled
                            >
                        </el-rate>
                    </template>
                </el-table-column>
                <el-table-column
                v-if="paper.answer"
                width="50px"
                label="完成">
                    <template slot-scope="scope">
                        <div class="icon">
                            <i v-if="scope.row.answerItem" class="el-icon-success"></i>
                            <i v-else class="el-icon-info"></i>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="btn">
                <div>满分：{{ count }}</div>
                <div>时间：{{ format }}</div>
            </div>
            <div class="btn">
                <el-button @click="exit">返回</el-button>
                <el-button type="warning" @click="continuePaper" v-if="this.paper.answer">继续答题</el-button>
                <el-button type="primary" @click="submit">新答题</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState, mapMutations } from 'vuex';
    import { editAnswer } from '@/api/answer'
    export default {
        data(){
            return {
                titmr : new Date().getTime(),
                titmrID : undefined,
            }
        },
        created(){
            if (!this.paper) {
                this.$router.replace('/student/home')
            }
            if (this.paper && this.paper.answer) {
                this.titmrID = setInterval(() => {
                    this.titmr = new Date().getTime()
                }, 1000)
            }
        },
        computed : {
            ...mapState(['paper']),
            count(){
                let i = 0
                this.paper.list.forEach(e => {
                    i += e.topic.level
                });
                return i
            },
            format(){
                if(this.paper.answer){
                    let t = this.paper.answer.createTime + this.paper.paper.time - this.titmr
                    return `${parseInt(t / 60000)}分${parseInt(t % 60000 / 1000)}秒`
                }
                return parseInt(this.paper.paper.time / 60000) + '分钟'
            }
        },
        methods : {
            ...mapMutations(['closePaper']),
            submit(){
                if(this.paper.answer){
                    this.paper.answer.status = 1
                    editAnswer(this.paper.answer)
                    this.paper.answer = undefined
                    this.paper.list.forEach(n => {
                        n.answerItem = undefined
                    })
                }
                editAnswer({
                    paperId : this.paper.paper.id
                }).then(res => {
                    if(res.code == 200){
                        this.paper.answer = {
                            id : res.data,
                            createTime : new Date().getTime()
                        }
                        this.$router.replace('/student/code')
                    }
                })
            },
            continuePaper(){
                this.$router.replace('/student/code')
            },
            exit(){
                this.closePaper()
                this.$router.back()
            },
        },
        beforeDestroy(){
            if (this.titmrID) {
                clearInterval(this.titmrID)
            }
        },
    }
</script>

<style lang="scss" scoped>
.paper{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    .box{
        width: 1200px;
        max-width: calc(100% - 20px);
        padding: 20px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        .btn{
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            &>div{
                margin: 0 10px;
            }
        }
        .icon{
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            .el-icon-success{
                color: #67C23A;
            }
            .el-icon-info{
                color: #909399;
            }
        }
    }
}
</style>